<template>
  <gui-page ref="pageRef" class="gui-bg-white" :custom-header="true" :full-page="true" :is-loading="pageLoading">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text" style="font-size: 32rpx">历史诊断报告</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column gui-padding">
        <!-- 主体区域 -->
        <view
          v-for="(item, index) in 10"
          :key="index"
          class="gui-margin-top gui-bg-orange5 gui-border-radius-large gui-wrap"
          style="padding: 40rpx"
          @tap.stop="handleClick(item)"
        >
          <text>2023-12-02</text>
          <text class="gui-margin-x">诊断报告</text>
        </view>
      </view>
      <view style="height: 90rpx" />
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const pageLoading = ref<boolean>(false)

const handleClick = (e: any) => {
  console.log(e)
  uni.navigateTo({
    url: '../report/index',
  })
}
const getServerData = () => {
  //模拟从服务器获取数据时的延时
}

onLoad((option) => {
  // console.log(JSON.parse(option.data))
  getServerData()
})
</script>
<style scoped>
/deep/ .graceSelectMenuItem {
  width: 160rpx;
  flex: 1;
}
/deep/ .gui-select-menu-title {
  height: 66rpx !important;
}
/deep/ .gui-select-menus {
  margin-top: 75rpx !important;
  border-top: 1px solid #f2f2f2;
}

/deep/ .select-title {
  width: 200rpx !important;
}

.modal-close {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 0.88;
  text-align: center;
  font-size: 58rpx;
}
.gui-td {
  flex: 1;
  overflow: hidden;
  padding: 10rpx;
}
.gui-primary-text {
  line-height: 60rpx !important;
  font-size: 24rpx;
}
</style>
